<template>
  <div>
    <el-row gutter="20" class="mgb20">
      <el-col span="6">
        <el-card shadow="hover" :body-style="{padding: '0px'}">
          <div class="grid-content grid-con-1">
            <div class="grid-cont-right">
              <div class="grid-num">{{consumerCount}}</div>
              <div>用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col span="6">
        <el-card shadow="hover" :body-style="{padding: '0px'}">
          <div class="grid-content grid-con-1">
            <div class="grid-cont-right">
              <div class="grid-num">{{songCount}}</div>
              <div>歌曲总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col span="6">
        <el-card shadow="hover" :body-style="{padding: '0px'}">
          <div class="grid-content grid-con-1">
            <div class="grid-cont-right">
              <div class="grid-num">{{singerCount}}</div>
              <div>歌手总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col span="6">
        <el-card shadow="hover" :body-style="{padding: '0px'}">
          <div class="grid-content grid-con-1">
            <div class="grid-cont-right">
              <div class="grid-num">{{songListCount}}</div>
              <div>歌单总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <h3 class="mgb20" style="margin-bottom: ">用户性别比例</h3>
        <div style="background-color: white">
          <ve-pie :data="consumerSex" :theme="consumerSexOptions"></ve-pie>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 class="mgb20"  style="margin-bottom: 20px">歌曲类型分布</h3>
        <div style="background-color: white">
          <ve-histogram :data="songStyle" :theme="songStyleOptions"></ve-histogram>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <h3 class="mgb20" style="margin-bottom: ">歌手性别比例</h3>
        <div style="background-color: white">
          <ve-pie :data="singerSex" :theme="singerSexOptions"></ve-pie>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 class="mgb20"  style="margin-bottom: 20px">歌手国籍分布</h3>
        <div style="background-color: white">
          <ve-histogram :data="singerCountry" :theme="singerCountryOptions"></ve-histogram>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        consumerCount: -1,
        singerCount: -1,
        songCount: -1,
        songListCount: -1,
        consumerSex: {
          columns: ['性别', '总数'],
          rows: [{'性别':'男','总数': 0}, {'性别': '女','总数': 0}]
        },
        consumerSexOptions: {
          color: ['#87CEFA', '#FFC0CB']
        },
        singerSex: {
          columns: ['性别', '总数'],
          rows: [{'性别':'男','总数': 0}, {'性别': '女','总数': 0}]
        },
        singerSexOptions: {
          color: ['#87CEFA', '#FFC0CB']
        },
        songStyle: {
          columns: ['风格', '总数'],
          rows: [
            { '风格': '华语', '总数': 0 },
            { '风格': '粤语', '总数': 0 },
            { '风格': '欧美', '总数': 0 },
            { '风格': '日韩', '总数': 0 },
            { '风格': 'BGM', '总数': 0 },
            { '风格': '轻音乐', '总数': 0 },
            { '风格': '乐器', '总数': 0 }
          ]
        },
        songStyleOptions: {
          color: ['#FD8A61'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          }
        },
        singerCountry: {
          columns: ['国家', '总数'],
          rows: [
            { '国家': '中国', '总数': 0 },
            { '国家': '韩国', '总数': 0 },
            { '国家': '意大利', '总数': 0 },
            { '国家': '新加坡', '总数': 0 },
            { '国家': '美国', '总数': 0 },
            { '国家': '马来西亚', '总数': 0 },
            { '国家': '西班牙', '总数': 0 },
            { '国家': '日本', '总数': 0 }
          ]
        },
        singerCountryOptions: {
          color: ['yellow'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          }
        },
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        this.axios.get(this.$store.state.HOST + '/consumer/findAll').then((res) => {
          if (res.data.code == 1) {
            this.consumerCount = res.data.data.length;
            for(let item of res.data.data){
              if(item.sex==1){
                this.consumerSex.rows[0]['总数']++;
              }else{
                this.consumerSex.rows[1]['总数']++;
              }
            }
          } else {
            this.$message.error("用户数据加载失败");
          }
        })
        this.axios.get(this.$store.state.HOST + '/singer/findAll').then((res) => {
          if (res.data.code == 1) {
            this.singerCount = res.data.data.length;
            for(let item of res.data.data){
              if(item.sex==1){
                this.singerSex.rows[0]['总数']++;
              }else{
                this.singerSex.rows[1]['总数']++;
              };
              for(let item1 of this.singerCountry.rows){
                if(item.location.includes(item1['国家'])){
                  item1['总数']++;
                }
              }
            }
          } else {
            this.$message.error("歌手数据加载失败");
          }
        })
        this.axios.get(this.$store.state.HOST + '/song/findAll').then((res) => {
          if (res.data.code == 1) {
            this.songCount = res.data.data.length;
          } else {
            this.$message.error("歌曲数据加载失败");
          }
        })
        this.axios.get(this.$store.state.HOST + '/songList/findAll').then((res) => {
          if (res.data.code == 1) {
            this.songListCount = res.data.data.length;
            for(let item of res.data.data){
              for(let item1 of this.songStyle.rows){
                if(item.style.includes(item1['风格'])){
                  item1['总数']++;
                }
              }
            }
          } else {
            this.$message.error("歌单数据加载失败");
          }
        })
      },
    },
  }
</script>

<style>
  .grid-content {
    display: flex;
    align-items: center;
    height: 100px;
  }

  .grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
  }

  .grid-num {
    font-size: 30px;
    font-weight: bold;
  }
</style>
